



import React, { Component } from 'react';
import PropTypes from 'prop-types';
import MySwipe from './MySwipe';

import IMG from '@/images/404.png'
import { Ajax } from './../utils/ajax';
class MyBanner extends Component {
    state = {
        banners:[],
        imgs:[
            {url:IMG},
            {url:IMG},
            {url:IMG},
            {url:IMG},
        ],
        options:{
            effect : 'cube',
            cubeEffect: {
              slideShadows: true,
              shadow: true,
              shadowOffset: 100,
              shadowScale: 0.6
            },
            // effect : 'fade',
            // fadeEffect: {
            //   crossFade: true,
            // },
            loop:true,
            time:2400,
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
        }
    }

    getBannersData=async ()=>{
        let res = await Ajax.get('http://81.69.235.62:3000/app/banners')
        if(res.data.code==200){
            this.setState({
                banners:res.data.result 
            })
        }
    }
    componentDidMount(){
        this.getBannersData()
    }
    render() {
        const {options} = this.state;
        return (
            <div>
                <h2>React 封装轮播图 </h2>
                <MySwipe options={options}>
                    {
                        this.state.imgs.map((item,index)=>{
                            return (
                                <MySwipe.Item key={index}>
                                    <img src={item.url} alt="" style={{width:'100%',height:300}} />
                                </MySwipe.Item>
                            )
                        })
                    }
                </MySwipe>

                <MySwipe options={options} id="btwo">
                    {
                        this.state.banners.map((item,index)=>{
                            return (
                                <MySwipe.Item key={index}>
                                    <img src={item.imgurl.replace(/public/, 'http://81.69.235.62:3000'  )} alt="" style={{width:'100%',height:300}} />
                                </MySwipe.Item>
                            )
                        })
                    }
                </MySwipe>
            </div>
        );
    }
}


MyBanner.propTypes = {

};


export default MyBanner;
